<template>
	<view class="address-edit-content">
		<view class="form-wrap">
			<view class="form">
				<FormItem label="收件人">
					<input v-model="address.consignee" type="text">
				</FormItem>
				<FormItem label="手机号">
					<input v-model="address.phone" type="number">
				</FormItem>
				<FormItem label="地址">
					<region-picker @change="(e)=>region_change(e, 'out')" :value="350104">
						<view class="picker">{{ address.area }}</view>
					</region-picker>
				</FormItem>
				<FormItem label="详细地址">
					<input v-model="address.detail" type="text">
				</FormItem>
				<FormItem label="设置为默认">
					<switch :checked="address.isDefault" 
					@change="address.isDefault = !address.isDefault"
					color="#5ca45b" style="transform:scale(0.7)"/>
				</FormItem>
				<FormItem label="备注">
					<input  v-model="address.label" type="text">
				</FormItem>
			</view>
			<view class="button-view">
				<button @click="cancel">撤销</button>
				<button @click="submitForm" class="submit">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import FormItem from "./components/form-item.vue";
	import regionPicker from "@/components/region-picker/region-picker.vue"
	import {
		addAddressApi,
		getAddressByIdApi,
		updateAddressApi
	} from "@/http/address.js"

	export default {
		data() {
			return {
				address: {
					id: null,
					consignee: "",
					phone: "",
					area: "请选择",
					areaArr: [],
					codeArr: [],
					detail: "",
					label: "",
					isDefault: false
				}
			}
		},
		components: {
			FormItem,
			regionPicker
		},
		onLoad(e) {
			if (e.id) {
				// 修改
				this.getAddressById(e.id);
			} else {
				// 添加
				this.address = {
					id: null,
					consignee: "",
					phone: "",
					area: "请选择",
					areaArr: [],
					codeArr: [],
					detail: "",
					label: "",
					isDefault: false
				}
			}
		},
		methods: {
			// 修改地址  获取地址信息
			async getAddressById(id) {
				const address = await getAddressByIdApi(id);
				if (address) {
					this.address.id = address.id,
					this.address.consignee = address.consignee;
					this.address.phone = address.phone;
					this.address.detail = address.detail;
					this.address.label = address.label;
					this.address.isDefault = address.isDefault;
					this.address.area =  `${address.provinceName} ${address.cityName} ${address.districtName}`
					this.address.areaArr = [address.provinceName, address.cityName, address.districtName];
					this.address.codeArr = [address.provinceCode,  address.cityCode, address.districtCode];
					this.address.isDefault = address.isDefault?true:false
				}
			},


			// 地址
			region_change(e, type) {
				console.log(e);
				const {
					value
				} = e.detail
				const {
					code
				} = e.detail
				this.address.areaArr = value;
				this.address.codeArr = code
				this.address.area = value.join(' ')
			},
			// 详细地址
			bindTextAreaBlur: function(e) {
				console.log(e.detail.value)
			},
			// 提交
			async submitForm() {
				const form = {
					id: this.address.id,
					consignee: this.address.consignee,
					phone: this.address.phone,
					detail: this.address.detail,
					label: this.address.label,
					isDefault: this.address.isDefault,
					provinceCode: this.address.codeArr[0],
					provinceName: this.address.areaArr[0],
					cityCode: this.address.codeArr[1],
					cityName: this.address.areaArr[1],
					districtCode: this.address.codeArr[2],
					districtName: this.address.areaArr[2],
					isDefault:this.address.isDefault?1:0
				}
				let res = null;
				if(form.id == null){
				  res = await addAddressApi(form);
				}else{
				  res = await updateAddressApi(form);
				}
				if (res.code == 1) {
					this.cancel();
				}


			},
			// 撤销
			cancel() {
				this.address = {
					id: null,
					consignee: "",
					phone: "",
					area: "请选择",
					areaArr: [],
					codeArr: [],
					detail: "",
					label: "",
					isDefault: "0"
				}
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.address-edit-content {
		min-height: 100vh;
		background-color: #fbf9ec;
		padding-top: 30rpx;

		.form-wrap {
			padding: 0 20rpx;

			.form {
				padding: 15rpx;
				background-color: #ffffff;
				box-shadow: -3rpx -3rpx 3rpx rgb(209, 209, 209) inset;
				border-radius: 20rpx;
			}

			.button-view {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				width: calc(100% - 30rpx);

				button {
					width: 240rpx;
				}

				.submit {
					background-color: #5ca45b;
					color: #ffffff;
				}
			}
		}
	}

	input {
		background-color: #efefef;
		height: 66rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 10rpx;
	}

	textarea {
		background-color: #efefef;
		height: 66rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 10rpx;
	}
</style>